<template>
  <div class="myClub">
    <div class="myClub-navBar">
       <van-nav-bar title="我的社团" left-arrow @click-left="toMy">
        <template #right>
          <van-button type="primary" size="small" @click="isAddShow=true">+ 创建</van-button>
        </template>
       </van-nav-bar>
    </div>
    <div class="myClub-content">
      <Club
        v-for="(item,index) in club"
        :key="index"
        :clubName="item.clubName"
        :clubDesc="item.clubDesc"
        :clubCover="item.clubCover"
        :clubTag="item.clubTag"
        :clubMember="item.clubMember"
        :clubMemberInfo="item.clubMemberInfo"
        @click="checkClubDetail(item)"
      />
    </div>
    <div>
      <van-popup v-model:show="isAddShow" position="bottom" round closeable close-icon-position="top-left">
        <AddClub @setAddShowClose='setAddShowClose'/>
      </van-popup>
      <van-popup v-model:show="isClubDetailShow" position="bottom" round closeable close-icon-position="top-left">
        <MyClubDetail
          :detailData="detailData"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
import {NavBar,Button,Popup} from "vant";
import AddClub from "./components/AddClub";
import Club from "@/components/Club"
import { checkLogin, getClub } from "@/service/user";
import MyClubDetail from "./components/MyClubDetail";
export default {
  components:{
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Popup.name]: Popup,
    AddClub,
    Club,
    MyClubDetail
},
  mounted(){
    checkLogin().then(res1=>{
      getClub().then(res2=>{
        this.club = res2.filter(item=>item.authorId == res1.userInfo._id);
      })  
    })
    
  },
  data(){
    return {
      isAddShow:false,
      isClubDetailShow:false,
      detailData:{},
      club:[]
    }
  },
  methods:{
    toMy(){
      this.$router.push('/my');
    },
    setAddShowClose(){
      this.isAddShow = false;
    },
    checkClubDetail(data){
      this.isClubDetailShow = true;
      this.detailData = data;
    }
  }
}
</script>
<style lang="less">
.myClub{
  background: #EFEFEF;
  height: calc(100vh - 50px);
  padding-bottom: 50px;
  overflow-y: auto;
}
</style>